<!--
 * @Author: CHINAKAIYUAN<sunkaiyuan@namenode.cn>
 * @Date: 2022-02-03 14:41:20
 * @LastEditTime: 2023-10-20 13:33:26
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @Description:   :gridOps="gridOptions" other
-->

<template>
	<el-container>
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="45px">
			<el-main style="height: 100%">
				<el-row style="height: 100%" class="arespace">
					<el-col :span="9" style="height: 100%">
						<sc-VxeTable ref="xGridOder" :gridEvts="gridEventsOrder" :tablecode="'pro_plan_order'" :params="[
			{
				plan_quantity: { type: 'gt', value: 0 },
			},
			{
				'process_route.name': {
					type: 'lk',
					value: '染色',
				},
			},
			{
				'status_id': {
					type: 'ge',
					value: '1',
				},
			}
		]" :url="api.market.order.details"></sc-VxeTable>
					</el-col>
					<el-col :span="8" style="height: 100%" class="arespace">
						<el-row style="height: 100%">
							<el-col :span="5" style="height: 100%" class="arespace">
								<div style="height: 50%">
									<sc-VxeTable ref="xGridLot" :tablecode="'pro_plan_lot'" :params="getLotParams"
										:url="api.pro.color.details"></sc-VxeTable>
								</div>
								<div style="height: 50%">
									<sc-VxeTable ref="xGridLot2" :tablecode="'pro_plan_lot2'" :params="getLotParams"
										:url="api.market.order.details"></sc-VxeTable>
								</div>
							</el-col>
							<el-col :span="19" style="height: 100%">
								<el-row style="height: 244px">
									<el-col :span="16">
										<el-form-item label="备注">
											<el-input v-model="form.remark" disabled />
										</el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item label="投纱" prop="feeding_ratio">
											<el-input v-model="form.feeding_ratio" disabled />
										</el-form-item>
									</el-col>

									<el-col :span="7">
										<el-form-item label="染缸" prop="loom_id">
											<skAutoComplete v-model="form.loom.name" :name="'loom'" @select="loomSelect"
												:params="getQuantity" :sort="'dosage'">
											</skAutoComplete>
											<!-- <el-input v-model="form.dyebath_id" readonly /> -->
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="加急" prop="emergency_id">
											<skDicSelect v-model="form.emergency_id" :code="'Emergency'">
											</skDicSelect>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item label="班次" prop="classgroup_id">
											<skDicSelect v-model="form.classgroup_id" :code="'ClassGroup'">
											</skDicSelect>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="排缸" prop="plan_quantity" class="paigang">
											<el-input v-model="form.plan_quantity">
												<template #append>
													<el-input v-model="form.addqty" placeholder="填写加投"
														:disabled="state_id == 1" />
												</template></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="车间" prop="pro_dept_id">
											<skAutoChoose v-model="form.pro_dept.name" :name="'pro_dept'"
												:asKey="'pro_dept_id'" :assign="form" :params="{
			'process_dept.process_id': 3,
		}">

												<template #append>
													<el-button class="submit" @click="savePlan" :disabled="selectOrderCount !=
			1 ||
			selectKcCount == 0
			">确认</el-button></template>
											</skAutoChoose>
										</el-form-item>
									</el-col>
									<el-col :span="23">
										<el-form-item label="备注" prop="dgremark">
											<el-input v-model="form.dgremark" placeholder="填写生产备注" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-main style="height: calc(100% - 244px)">
									<sc-VxeTable ref="xGridKc" :gridEvts="gridEventsKc" :tablecode="'pro_plan_kc'"
										:params="getKcparams" :url="list_kc_url"></sc-VxeTable>
								</el-main>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="7" style="height: 100%" class="arespace">
						<sc-VxeTable ref="xGridLoom" :tablecode="'pro_plan_loom'"
							:url="api.report.loom.list"></sc-VxeTable>
					</el-col>
				</el-row>
			</el-main>
		</el-form>
	</el-container>
</template>

<script>
export default {
	name: "pro_plan_dyeing",
};
</script>

<script setup>
import skAutoComplete from "@/components/skAutoComplete";
import skAutoChoose from "@/components/skAutoChoose";
import skDicSelect from "@/components/skDicSelect";
// import { useRouter } from "vue-router";
import { ref, nextTick } from "vue";
// , onMounted, reactive, ref
// const router = useRouter();
import tool from "@/utils/tool";
import { showLoading, hideLoading } from "@/utils/showloading";

import api from "@/api";
const dialog = ref({
	save: false,
});
const list_kc_url = ref(api.storage.storage.planYarnlist);
const xGridOder = ref({});
const xGridKc = ref({});
const xGridLot = ref({});
const xGridLot2 = ref({});
const xGridLoom = ref({});

const dialogForm = ref({});

const state_id = ref(0);
// const handleSuccess = () => {
//   xGrid.value.refresh();
// };
const rules = {
	plan_quantity: [{ required: true, message: "排缸数必填" }],
	loom_id: [{ required: true, message: "染缸必选！" }],
	pro_dept_id: [{ required: true, message: "加工车间必选" }],
};
let defaultForm = {
	singler: {},
	loom: { name: "" },
	pro_dept: { name: "染色车间" },
	pro_dept_id: 3,
	emergency_id: 0,
	classgroup_id: 1,
	dgremark: "",
};
const form = ref(tool.objCopy(defaultForm));
const loomSelect = function (data) {
	if (data == []) this.form.loom_id = 0;
	else form.value.loom_id = data.id;
};
const getQuantity = function () {
	return [
		{
			dosage: { type: "ge", value: form.value.plan_quantity ?? 0 },
			status_id: 0,
		},
	];
};
const getKcparams = () => {
	let _param = [
		{
			material_id: form.value.material_id ?? -100,
		},
	];
	if (isrepair == 0) {
		//拉出指定客户纱
		if (state_id.value == 1) {
			_param.push({ iscustomer: state_id.value == 1 ? 1 : 0 });

			if (state_id.value == 1 ? 1 : 0) {
				_param.push({ customer_id: form.value.company_id });
			}
		}
	}

	return _param;
};
const getLotParams = () => [
	{
		material_id: form.value.material_id ?? -100,
		main_id: form.value.color_id,
	},
];
//订单事件
const selectOrderCount = ref(0);
const gridEventsOrder = {
	selectData: (row = []) => {
		selectOrderCount.value = row.length;
		if (row.length == 1) {
			form.value["company_id"] = row[0]["main"]["customer_id"];
			form.value["department_id"] = row[0]["main"]["department_id"];
			form.value["order_id"] = row[0]["id"];
			form.value["plan_quantity"] = row[0]["plan_quantity"]; //计划数量
			form.value["pro_quantity"] = row[0]["plan_quantity"]; //待开卡数量
			form.value["material_id"] = row[0]["material_id"];
			form.value["color_id"] = row[0]["color_id"];
			form.value["emergency_id"] = row[0]["emergency_id"] ?? 0; //加急
			form.value["order_user_id"] = row[0]["creator_id"];
			form.value["process_route_id"] = row[0]["process_route_id"];
			form.value["outfactory_id"] = 31; //yz

			form.value["plan_id"] = 1; //染色

			form.value["order_code"] = row[0]["main"]["code"]; //吨投料比例
			form.value["feeding_ratio"] = row[0]["main"]["feeding_ratio"]; //吨投料比例
			form.value["remark"] = row[0]["main"]["remark"];
			form.value["singler"] = row[0]["main"]["singler"];

			state_id.value = row[0]["main"]["state_id"];
			if (state_id.value == 1) {
				form.value['addqty'] = 0;
			}
			// form.value = Object.assign(form.value, tool.removeNull(row[0]));
		} else form.value = tool.objCopy(defaultForm);
		xGridKc.value.refresh();
		xGridLot.value.refresh();
		xGridLot2.value.refresh();
	},
};
let selectKcIds = [];
const selectKcCount = ref(0);
let maxkclot_name = "";
let maxkclot_id = 0;
let isrepair = 0;
const gridEventsKc = {
	selectData: (row) => {
		let max_quantity = 0,
			sum_quantity = 0;
		selectKcCount.value = row.length;
		selectKcIds = row.map((v) => {
			if (isrepair == 1)
				sum_quantity += parseFloat(v.sys_mpc_location_name);
			if (v.available_quantity > max_quantity) {
				maxkclot_name = v.sys_mpc_lot_defaultname;
				maxkclot_id = v.sys_mpc_lot_id;
			}

			return v.id;
		});
		if (sum_quantity > 0) {
			//选择复修库存，重新计算排缸数量
			form.value["plan_quantity"] =
				(sum_quantity / form.value["feeding_ratio"]) * 1000;
		}
	},
	listyarn: () => {
		isrepair = 0;
		list_kc_url.value = api.storage.storage.planYarnlist;
	},
	listrepair: () => {
		isrepair = 1;
		list_kc_url.value = api.pro.wip.repairwip;
	},
};

const savePlan = () => {
	dialogForm.value.validate(async (valid) => {
		if (valid) {
			showLoading("保存中！");
			form.value["storage_ids"] = selectKcIds; //库存Id
			form.value["lot_name"] = maxkclot_name; //最大库存批号
			form.value["lot_id"] = maxkclot_id; //最大库存id
			form.value["isrepair"] = isrepair;
			let res = await api.pro.plan.save.post(form.value);

			if (res.code == 200) {
				xGridOder.value.refresh();
				xGridLoom.value.refresh();
				gridEventsOrder.selectData();
				// message.success("操作成功");
			}
			hideLoading();
		}
	});
	hideLoading();
};
const gridEvents = {
	cellDblclick: function ({ row }) {
		gridEvents.edit(row);
	},
	add: function () {
		dialog.value.save = true;
	},
	edit: function (data) {
		dialog.value.save = true;
		if (typeof data.$grid !== "undefined") {
			data = data.$grid.getCheckboxRecords()[0];
		}
		nextTick(() => { });
	},
};
</script>

<style>
.arespace {
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-collapse: collapse;
}

.paigang .el-input-group__append {
	padding: 0px;
}

.selfcss .el-input-group__append .submit:hover {
	color: black;
	background-color: rgb(168, 246, 173);
}

.selfcss .el-input-group__append .submit {
	background-color: rgb(168, 246, 173);
}

.selfcss .el-input-group__append .is-disabled:hover,
.selfcss .el-input-group__append .is-disabled {
	background-color: rgb(243, 181, 181);
	color: rgb(144, 147, 153);
}
</style>
